<template>
    <div style="height: 100%">
        <el-menu default-active="homePage" class="el-menu-vertical-demo"
                 id="menu"
                 :collapse="isCollapse"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 router>
            <!--            使用index决定路由跳转路径-->
            <el-menu-item index="" v-model="isFold" @click="onFold">
                <i :class="isFold"></i>
                <template #title></template>
            </el-menu-item>
            <el-menu-item index="homePage">
                <i class="el-icon-s-home"></i>
                <template #title>Home</template>
            </el-menu-item>
            <el-menu-item index="templateBench" disabled>
                <i class="el-icon-collection"></i>
                <template #title>TemplateGraph</template>
            </el-menu-item>
            <el-menu-item index="HelloWorld" disabled>
                <i class="el-icon-s-tools"></i>
                <template #title>Test</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "navMenu",
        data() {
            return {
                isCollapse: false,
                isFold: "el-icon-s-unfold",
            };
        },
        methods: {
            onFold() {
                if (this.isCollapse) {
                    this.isCollapse = false;
                    this.isFold = "el-icon-s-unfold";
                } else {
                    this.isCollapse = true;
                    this.isFold = "el-icon-s-fold";
                }
            }
        }
    };
</script>

<style>
    .el-menu-vertical-demo {
        height: 100%;
        border: none;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        height: 100%;
    }
</style>
